.card {
    width: 214px;
    text-decoration: none;
    .card-img {
        width: 214px;
        height: 214px;
        background-image: url("https://oimageb5.ydstatic.com/image?id=-2067151026924529664&product=adpublish&w=360&h=360&sc=0&rm=2&gsb=0&gsbd=60");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .card-name {
        width: 214px;
        padding:  13px 0 12px;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        line-height: 1;
        color:#33333D;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .card-btm {
        position: relative;
        font-size: 0;
        > div {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
        }
        .singer {
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .hot-num {
            position: absolute;
            right: 0;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            img {
                position: relative;
                top: -3px;
                margin-right: 5px;
                width: 16px;
                vertical-align: middle;
            }
        }
    }
    &:hover {
        .card-name  {
            color:rgba(223,60,43,1);
        }
    }
}